<template>
	<div class="detail-right" @mouseover="stopFloorAuto" @mouseleave="startFloorAuto">
		<!-- 头部部分 -->
		<div class="top">
			<div class="top-left">
				<image src="../../static/img/edit.png" mode="" class="top-img"></image>
				<span class="text">建筑设备数据</span>
			</div>
			<div class="top-right pointer" @tap="checkModel">
				<image src="../../static/img/checkout.png" mode="" class="top-right-img"></image>
				<span class="text">{{checkModelText}}</span>
			</div>
		</div>
		<!-- 建筑选择列表 -->
		<div class='build-list' ref="totalList">
			<!-- 左右箭头 -->
			<template v-if="bulidingList.length>=1">
				<image :src="buildArrow.left" mode="" class="left-arrow pointer" @click="bulidLeftMove"
					v-if="buildLeftOpen"></image>
				<image :src="buildArrow.right" mode="" class="right-arrow pointer" @click="buildRightMove"
					v-if="buildLeftOpen"></image>
				<!-- 建筑列表 -->
				<!-- 总楼层列表 -->
				<div class="all-list" ref="allBuildList">
					<div class="list-item pointer" v-for="item in bulidingList"
						:class="item.buildingId===currentBuilding ? 'active' : ''" :key="item.buildingId"
						@click="selectBuilding(item.buildingId,item.buildingName,item.deptId)" ref="buildList">
						<span>{{item.buildingName}}</span>
					</div>
				</div>

			</template>
			<template v-else>
				<div style="color: #fff;font-size: 16px;">暂无相关建筑</div>
			</template>
		</div>
		<!-- 内容区域 -->
		<div class="content">
			<!-- 内容头部筛选 -->
			<div class="content-filter">
				<!-- 选择系统 -->
				<div class="select-system">
					<span class="system-text">选择系统</span>
					<el-select v-model="system" @change="selectSystem" style="width: 137px;">
						<el-option v-for="item in range" :key="item.value" :value="item.value" :label="item.label">
						</el-option>
					</el-select>

					<!-- 选择设备状态 -->
					<div class="device-status">
						<!-- 设备状态 -->
						<div class="status-item pointer" v-for="item in statusBtn" :key="item.id" :class="item.bg"
							@click="selectDeviceStatus(item.id,item.status)">
							<text class="item-text">{{item.text}}:</text>
							<text class="item-num">{{item.num}}</text>
							<img :src="item.img" alt="" v-if="item.id===currentStatus" class="status-img">
						</div>
					</div>
				</div>

			</div>
			<!-- 主要内容区 -->
			<div class="main-content">
				<!-- 模型展示 -->
				<div class="model" v-if="isshowCard" @mouseover="ishandleMouse">

					<!-- 有鼠标执行鼠标滚轮事件进行缩放 -->
					<div class="img-view-wrap" ref="buildimgBody" v-if="isHaveMouse">
						<div class="img-view-body" @mousedown.prevent="mousedown" ref="buildimgBox">
							<img ref="buildimg" :src="BaseUrl+'/admin/sys-file/' + cuurentFloorModal.image"
								title="鼠标可拖动，缩放" v-if="cuurentFloorModal.image" class="model-img">
							<div class="none-device" v-else>
								<img src="../../static/img/no-alarm.png" alt="" style="width: 207px;height: 130px;">
								<div style="color: rgba(255, 255, 255, 0.7);">暂无平面图</div>
							</div>
							<template v-if="cuurentFloorModal.image">
								<div class="sensor-pointer" v-for="item in sensorMarkers" :key="item.code"
									@click.self="selectPointer(item.code,item.id)"
									:style="{'left':item.positionSignX+'px','top':item.positionSignY+'px'}"
									:class="{'abnoraml':item.status===2,'alarm':item.status===1,'fault':item.status===0,'offline':item.status===4}">
									<img class="icon-img" @click.self="selectPointer(item.code,item.id)"
										:src="item.modelIcon" alt="">
									<!-- 弹框 -->
									<div class="pointer-modal card-item" v-show="item.isSelect" ref="modelDialog">
										<image src="../../static/img/floor-model-close.png" mode="" class="close-png"
											@click.stop="toCloseModel(item.code)"></image>

										<div class="item-top">
											<image :src="item.deviceIcon" class="top-img" mode=""></image>
											<div class="top-content">
												<div class="title" :style='{color:[item.color]}'
													@click="toMoreTitle(item.id)">{{item.deviceTypeName}}
												</div>
												<div class="tip" v-if="item.showMoreTitle">
													<div class="tip-top">
														<span class="tip-title">设备类型</span>
														<img src="../../static/img/close.png"
															@click="()=>item.showMoreTitle=false" class="close-png"
															alt="">
													</div>
													<div class="tip-content">
														{{item.deviceTypeName}}
													</div>
												</div>
											</div>
											<div class='btns'>
												<button class="control-btn" :class="item.commandFlag? '' : 'active' "
													@click="toControlDevice(item.id,item.commandFlag)">
													<img src="../../static/img/liandongkongzhi.png" class="control-img"
														alt="">
													<span>控制</span>
												</button>
												<button :class="item.videoId ? '' : 'active'"
													@click="toWatchVideo(item.videoId)">
													<img src="../../static/img/monitor-video.png" class="control-img"
														alt="">
													<span>监控</span>
												</button>
											</div>
										</div>
										<!-- 位置描述 -->
										<div class="address-desc">
											<image src="../../static/img/marker.png" mode="" class="marker-img"></image>
											<span class="address-text">{{item.addressDesc}}</span>
										</div>
										<scroll-view scroll-y="true" style="height: 225px;">
											<!-- 内容描述 -->
											<div class='info-desc' @mousewheel.stop="preventWheel">
												<div class="desc-left">
													<image :src="item.icon" mode="" class="left-img">
													</image>
													<div class="img-bg">
														<img src="../../static/img/device-bottom.png" class="bottom-img"
															alt="">
													</div>
												</div>
												<div class="desc-right">
													<!-- 描述板块 -->
													<div class='desc-content'>
														<div class="content-item">
															<span class='status-title'>设备状态:</span>
															<span class='status-content' :style={color:[item.color]}>
																{{item.text}} </span>
														</div>
													</div>
													<div class='desc-content'>
														<div class="content-item">
															<span class='status-title'>告警信息:</span>
															<span class='status-content alarm-reason'
																@click="toModelMore(item.id)"
																:style={color:[item.color]}>{{item.alarmReason}}</span>
															<div class="tip" v-if="item.showMore">
																<div class="tip-top">
																	<span class="tip-title">告警信息</span>
																	<img src="../../static/img/close.png"
																		class="close-png"
																		@click="()=>item.showMore=false" alt="">
																</div>
																<div class="tip-content">
																	{{item.alarmReason}}
																</div>
															</div>
														</div>
													</div>
													<div class='desc-content'>
														<div class="content-item">
															<span class='status-title'>上报时间:</span>
															<span class='status-content'>{{item.createTime}}</span>
														</div>
													</div>
												</div>
											</div>

											<div class='parameter-information' @mousewheel.stop="preventWheel">
												<div class='information-item' v-for="item1 in item.pointDatas"
													:key="item1.id">
													<div class='item-num'
														v-html="item1.lastAlarmInfo? item1.lastAlarmInfo:'--'">
													</div>
													<div class='item-detail'>{{item1.pointName}}<span
															v-html="item1.pointType===1?'('+item1.unit+')' : '' "></span>
													</div>
												</div>
											</div>
										</scroll-view>
									</div>
								</div>
							</template>
						</div>
					</div>
					<!-- 手指缩放容器 -->
					<movable-area style="width: 100%;height: 100%;position: relative;" ref="buildimgBody" v-else>
						<movable-view style="width: 100%;height: 100%;" direction="all" @change="onChange"
							@scale="onScale" :scale="true" ref="buildimgBox" :scale-value="scale">
							<img ref="buildimg" :src="BaseUrl+'/admin/sys-file/' + cuurentFloorModal.image"
								title="鼠标可拖动，缩放" v-if="cuurentFloorModal.image">
							<div class="none-device" v-else>
								<img src="../../static/img/no-alarm.png" alt="" style="width: 207px;height: 130px;">
								<div style="color: rgba(255, 255, 255, 0.7);">暂无平面图</div>
							</div>
							<template v-if="cuurentFloorModal.image">
								<div class="sensor-pointer" v-for="item in sensorMarkers" :key="item.code"
									@click.self="selectPointer(item.code,item.id)"
									:style="{'left':item.positionSignX+'px','top':item.positionSignY+'px'}"
									:class="{'abnoraml':item.status===2,'alarm':item.status===1,'fault':item.status===0,'offline':item.status===4}">
									<!-- 弹框 -->
									<img class="icon-img" @click.self="selectPointer(item.code,item.id)"
										:src="item.modelIcon" alt="">
									<div class="pointer-modal card-item" v-if="item.isSelect" ref="modelDialog">
										<image :src="item.picUrl" mode="" class="close-png"
											@click="toCloseModel(item.code)"></image>

										<div class="item-top">
											<image :src="item.deviceIcon" class="top-img" mode=""></image>
											<div class="top-content">
												<div class="title" :style='{color:[item.color]}'
													@click="toMoreTitle(item.id)">{{item.deviceTypeName}}
												</div>
												<div class="tip" v-if="item.showMoreTitle">
													<div class="tip-top">
														<span class="tip-title">设备类型</span>
														<img src="../../static/img/close.png"
															@click="()=>item.showMoreTitle=false" class="close-png"
															alt="">
													</div>
													<div class="tip-content">
														{{item.deviceTypeName}}
													</div>
												</div>
											</div>
											<div class='btns'>
												<button class="control-btn" @click="toControlDevice(item.id)">
													<img src="../../static/img/liandongkongzhi.png" class="control-img"
														alt="">
													<span>控制</span>
												</button>
												<button :class="item.videoId ? '' : 'active'"
													@click="toWatchVideo(item.videoId)">
													<img src="../../static/img/monitor-video.png" class="control-img"
														alt="">
													<span>监控</span>
												</button>
											</div>
										</div>
										<!-- 位置描述 -->
										<div class="address-desc">
											<image src="../../static/img/marker.png" mode="" class="marker-img"></image>
											<span class="address-text">{{item.addressDesc}}</span>
										</div>
										<scroll-view scroll-y="true" style="height: 225px;">
											<!-- 内容描述 -->
											<div class='info-desc' @mousewheel.stop="preventWheel">
												<div class="desc-left">
													<image :src="item.icon" mode="" class="left-img">
													</image>
													<div class="img-bg">
														<img src="../../static/img/device-bottom.png" class="bottom-img"
															alt="">
													</div>
												</div>
												<div class="desc-right">
													<!-- 描述板块 -->
													<div class="desc-content">
														<div class="content-item">
															<span class="status-title">设备状态:</span>
															<span class="status-content"
																:style={color:[item.color]}>{{item.text}}
															</span>
														</div>
													</div>
													<div class="desc-content">
														<div class="content-item">
															<span class='status-title'>告警信息:</span>
															<span class='status-content'
																:style={color:[item.color]}>{{item.alarmReason}}</span>
														</div>
													</div>
													<div class='desc-content'>
														<div class="content-item">
															<span class='status-title'>上报时间:</span>
															<span class='status-content'>{{item.createTime}}</span>
														</div>
													</div>
												</div>
											</div>
											<div class='parameter-information' @mousewheel.stop="preventWheel">
												<div class='information-item' v-for="item1 in item.pointDatas"
													:key="item1.id">
													<div class='item-num'
														v-html="item1.lastAlarmInfo? item1.lastAlarmInfo:'--'">
													</div>
													<div class='item-detail'>{{item1.pointName}}<span
															v-html="item1.pointType===1?'('+item1.unit+')' : '' "></span>
													</div>
												</div>
											</div>
										</scroll-view>
									</div>
								</div>
							</template>

						</movable-view>
					</movable-area>
					<div class="markerModel" v-if="isshowCard&&buildFloors.length>=1">
						<img class="markerImg" src="../../static/img/marker.png" alt="">
						<span
							class="marker-text">{{currentBuildingName}}{{currentFloor==-10000?'全部楼':currentFloor}}层</span>
					</div>
				</div>

				<!-- 卡片展示 -->
				<div class="card" v-else>
					<div class='all-item' v-if="deviceLists.length>=1">
						<div class="card-item" v-for="item in deviceLists" :key="item.id" @mouseover="stopFloorAuto"
							@mouseleave="startFloorAuto">
							<!-- 卡片头部 -->
							<div class="item-top">
								<image :src="item.deviceIcon" class="top-img pointer" mode=""
									@click="toShowDeviceDetail(item.code)"></image>
								<div class="top-content">
									<div class="title" :style='{color:[item.color]}' @click="toShowMoreTitle(item.id)">
										{{item.deviceTypeName}}
									</div>
									<div class="tip" v-if="item.showMoreTitle">
										<div class="tip-top">
											<span class="tip-title">设备类型</span>
											<img src="../../static/img/close.png" @click="()=>item.showMoreTitle=false"
												class="close-png" alt="">
										</div>
										<div class="tip-content">
											{{item.deviceTypeName}}
										</div>
									</div>
								</div>
								<div class='btns'>
									<button :class="item.commandFlag? '' : 'active' "
										@click="toControlDevice(item.id,item.commandFlag)">
										<img src="../../static/img/liandongkongzhi.png" class="control-img" alt="">
										<span>控制</span>
									</button>
									<button :class="item.videoId ? '' : 'active' " @click="toWatchVideo(item.videoId)">
										<img src="../../static/img/monitor-video.png" class="control-img" alt="">
										<span>监控</span>
									</button>
								</div>
							</div>
							<!-- 位置描述 -->
							<div class="address-desc">
								<image src="../../static/img/marker.png" mode="" class="marker-img"></image>
								<span class="address-text">{{item.addressDesc}}</span>
							</div>

							<scroll-view scroll-y="true" style="height:195px;">
								<!-- 内容描述 -->
								<div class='info-desc'>
									<div class="desc-left" @click="toShowDeviceDetail(item.code)">
										<image :src="item.icon" mode="" class="left-img"></image>
										<div class="img-bg">
											<img src="../../static/img/device-bottom.png" class="bottom-img" alt="">
										</div>
									</div>
									<div class="desc-right">
										<!-- 描述板块 -->
										<div class='desc-content'>
											<div class="content-item">
												<span class='status-title'>设备状态:</span>
												<span class='status-content'
													:style={color:[item.color]}>{{item.text}}</span>
											</div>
										</div>
										<div class='desc-content'>
											<div class="content-item ">
												<span class='status-title'>告警信息:</span>
												<span class='status-content  alarm-reason' @click="toShowMore(item.id)"
													:style={color:[item.color]}>{{item.alarmReason}}</span>
												<div class="tip" v-if="item.showMore">
													<div class="tip-top">
														<span class="tip-title">告警信息</span>
														<img src="../../static/img/close.png"
															@click="()=>item.showMore=false" class="close-png" alt="">
													</div>
													<div class="tip-content">
														{{item.alarmReason}}
													</div>
												</div>
											</div>
										</div>
										<div class='desc-content'>
											<div class="content-item">
												<span class='status-title'>上报时间:</span>
												<span class='status-content'>{{item.createTime}}</span>
											</div>
										</div>
									</div>
								</div>

								<div class='parameter-information'>
									<div class='information-item' v-for="(item2,index) in item.devicePointList"
										:key="item2.id" :class="index===0 ? item.bg : ''">
										<div class='item-num' :style="{color:[index===0?item.color:'']}"
											v-html="item2.lastAlarmInfo? item2.lastAlarmInfo:'--'">
										</div>
										<div class='item-detail'>{{item2.pointName}}<span
												v-html="item2.pointType===1?'('+item2.unit+')' : '' "></span></div>
									</div>
								</div>
							</scroll-view>
						</div>
					</div>
					<div class="none-device" v-else>
						<img src="../../static/img/no-alarm.png" alt="">
						<div>暂无设备</div>
					</div>
				</div>
				<div class="floor-select" v-if="buildFloors.length>=1">
					<div class="floor-all pointer" :class='totalFloor.bg' @click="selectTotalFloor" v-if="!isshowCard">
						全部
					</div>
					<image :src="floorArrow.top" class="pointer" mode="" @click="topPageFloor"></image>
					<div class="all-floor" ref="allFloor"
						style="max-height: 420px; overflow: hidden;padding-left:30px;">
						<div class="floor-item pointer" ref="floorItem" v-for="(item,index) in buildFloors"
							:key="item.floor" :class='item.bg' @click="selectCurrentFloor(item.floor,index)">
							<span>{{item.floor}}F</span>
							<image :src="item.icon" class="floor-icon" v-if="currentFloor==item.floor"></image>
						</div>
					</div>
					<image :src="floorArrow.bottom" class="pointer" mode="" @click="topPageBottom"></image>
				</div>
			</div>
			<!--左侧地图标注 -->
			<div class="right-bottom" v-if="!isshowCard">
				<div class="marker" v-if="buildFloors.length>=1">
					<img src="../../static/img/marker.png" alt="">
					<span class="marker-text">{{currentBuildingName}}{{currentFloor==-10000?'全部楼':currentFloor}}层</span>
				</div>
				<!-- 分页显示器 -->
				<div class="pagination" style="" v-if="!isshowCard&& deviceLists.length>=1">
					<page-pagination :total="pageationObj.total" :pageSize="pageationObj.pageSize"
						:currentPage="pageationObj.pageNum" @change="changePageation"></page-pagination>
				</div>
			</div>
		</div>
		<!-- 设备详情组件 -->
		<device-detail :deviceId="DeviceDetailObj.deviceId" :deptId="DeviceDetailObj.deptId"
			:deviceCode='DeviceDetailObj.deviceCode' @isCloseDevice="isCloseDevice" v-if="deviceShow"></device-detail>
	</div>
</template>

<script>
	import deviceApi from "@/api/device.js"
	import DeviceDetail from "@/component/model/deviceDetail.vue" //导入设备详情组件
	import {
		listDeviceCommandDesc
	} from "../../api/equipManage.js";
	export default {
		props: {
			buildId: {
				type: Number,
				default: 0
			},
			deptId: {
				type: Number,
				default: 0
			},
			isVideoControl: {
				type: Boolean,
				default: false
			},
			isRemoteControl: {
				type: Boolean,
				default: false
			}
		},
		components: {
			DeviceDetail
		},
		data() {
			return {
				scale: 0,
				value: '',
				x: 0,
				y: 0,
				range: [],
				statusBtn: [{
						id: 1,
						text: '全部',
						bg: 'total',
						status: '',
						img: require("../../static/img/total-bottom-icon.png"),
						num: 0
					},
					{
						id: 2,
						text: '正常',
						bg: 'normal',
						img: require("../../static/img/normal-bottom-icon.png"),
						status: 2,
						num: 0
					},
					{
						id: 3,
						text: '报警',
						bg: 'alarm',
						img: require("../../static/img/alarm-bottom-icon.png"),
						status: 1,
						num: 0
					},
					{
						id: 4,
						text: '故障',
						bg: 'fault',
						img: require("../../static/img/fault-bottom-icon.png"),
						status: 0,
						num: 0
					},
					{
						id: 5,
						text: '离线',
						bg: 'off-line',
						img: require("../../static/img/offline-bottom-icon.png"),
						status: 4,
						num: 0
					}
				],
				currentStatus: 1,
				isshowCard: true,
				checkModelText: '切换卡片模式',
				deviceLists: [],
				pageationObj: {
					total: 0,
					pageSize: 6,
					pageNum: 1
				},
				totalFloor: [],
				currentFloor: '-10000',
				cuurentFloorModal: '',
				BaseUrl: uni.getStorageSync('urlText'),
				index: 0,
				timer: null,
				imgWidth: null,
				imgHeight: null,
				sensorMarkers: [],
				bulidDevice: null,
				system: '',
				status: null,
				bulidingList: [],
				currentBuilding: null, //选中建筑id
				currentBuildingName: '',
				currentDeptId: null, //选中单位id
				buildFloors: [],
				realTimeDeviceLists: [],
				currentFloorPonit: false,
				isHaveMouse: false,
				isHaveRemote: false,
				isHaveVideo: false,
				floorArrow: {
					top: require("../../static/img/top-arrow.png"),
					bottom: require("../../static/img/bottom-arrow2.png")
				},
				buildArrow: {
					left: require("../../static/img/left-arrow.png"),
					right: require("../../static/img/right-arrow.png")
				},
				buildLeftOpen: false,

				windowWidthFlag: true,
				deviceShow: false, //控制设备弹窗是否显示
				DeviceDetailObj: {
					deptId: '',
					deviceId: '',
					deviceCode: ''
				}
			}
		},
		created() {
			let {
				windowWidth
			} = uni.getSystemInfoSync()
			if (windowWidth >= 1680) {
				this.windowWidthFlag = true
				this.pageationObj.pageSize = 6
			} else {
				this.windowWidthFlag = false
				this.pageationObj.pageSize = 4
			}
			//监听页面窗口变化切换设备每页显示数量
			uni.onWindowResize((res) => {
				if (res.size.windowWidth > 1680) {
					this.windowWidthFlag = true
				} else {
					this.windowWidthFlag = false
				}
			})
			let id = this.buildId
			deviceApi.getAllSystem().then(res => {
				this.range = res.data.map(v => {
					return {
						value: v.systemCode,
						label: v.systemName
					}
				})
				this.range = [{
					value: '',
					label: '全部系统'
				}, ...this.range]
			})
			deviceApi.getBuildingList({
				deptId: this.deptId,
				isDept: 0
			}).then(res => {
				let arr1 = res.data.filter(v => {
					if (v.buildingId === this.buildId) {
						this.currentBuilding = v.buildingId
						this.currentBuildingName = v.buildingName
						this.currentDeptId = v.deptId
						return v
					}
				})
				let arr2 = res.data.filter(v => {
					if (v.buildingId != this.buildId) {
						return v
					}
				})
				this.bulidingList = [...arr1, ...arr2]
				let self = this

				uni.$emit('buildLeftRefresh', {
					currentBuilding: this.currentBuilding,
					currentDeptId: this.currentDeptId
				})

				this.requestStatusNum()
				this.getBuildFloor()
				if (this.isshowCard) {
					this.getFloorModal()
				} else {
					this.requestListDevice()
				}
				uni.$on('globalRefreshDetail', function(data) {
					self.initR()
				})
			})
		},
		mounted() {
			this.initBulidArrow()
		},
		methods: {
			preventWheel() {
				console.log('阻止')
			},
			//初始化建筑左右箭头
			initBulidArrow() {
				setTimeout(() => {
					let totalLength = this.$refs.allBuildList.offsetWidth
					let boxtotalLength = this.$refs.totalList.offsetWidth
					if (boxtotalLength * 0.7 > totalLength) {
						this.buildLeftOpen = false
					} else {
						this.buildLeftOpen = true
					}
				}, 2000)

			},
			initR() {
				deviceApi.getAllSystem().then(res => {
					this.range = res.data.map(v => {
						return {
							value: v.systemCode,
							label: v.systemName
						}
					})
					this.range = [{
						value: '',
						label: '全部系统'
					}, ...this.range]
				})

				deviceApi.getBuildingList({
					deptId: this.deptId,
					isDept: 0
				}).then(res => {
					this.bulidingList = res.data
					this.requestStatusNum()
					this.getBuildFloor()
					if (this.isshowCard) {
						this.getFloorModal()
					} else {
						this.requestListDevice()
					}
				})
			},
			//封装当前建筑下的设备状态数量
			requestStatusNum() {
				deviceApi.getBuildDevice({
					buildingId: this.currentBuilding,
					floor: '-10000'
				}).then(res => {
					this.statusBtn.forEach(v => {
						if (v.status === 1) {
							v.num = res.data.all.alarmNum
						} else if (v.status === 2) {
							v.num = res.data.all.normalNum
						} else if (v.status === 4) {
							v.num = res.data.all.offlineNum
						} else if (v.status === 0) {
							v.num = res.data.all.faultNum
						} else {
							v.num = res.data.all.totalNum
						}
					})
				})

			},
			// 封装建筑下设备状态列表
			requestListDevice() {
				deviceApi.listBuildDevice({
					pageNum: this.pageationObj.pageNum,
					pageSize: this.pageationObj.pageSize,
					buildId: this.currentBuilding,
					floor: this.currentFloor,
					deptId: this.deptId,
					isDept: 0,
					system: this.system,
					status: this.status
				}).then(res => {
					this.pageationObj.total = res.data.total
					res.data.list.forEach(v => {
						v.showMore = false
						v.showMoreTitle = false
						if (!v.alarmReason) {
							v.alarmReason = "- -"
						}
						v.createTime = (v.createTime.slice(5)).replace(/-/g, '/')
					})
					this.deviceLists = res.data.list
					if (this.deviceLists && this.deviceLists.length >= 1) {
						this.deviceLists.forEach((v, index) => {
							if (v.status === 0) {
								v.deviceIcon = require("../../static/img/fault-card.png")
								v.bg = 'fault'
								v.color = 'rgba(254, 169, 64, 1)'
								v.text = '故障'
							} else if (v.status === 1) {
								v.deviceIcon = require("../../static/img/alarm-card.png")
								v.color = 'rgba(255, 61, 61, 1)'
								v.bg = 'alarm'
								v.text = '报警'

							} else if (v.status === 4) {
								v.deviceIcon = require("../../static/img/off-line-card.png")
								v.color = 'rgba(203, 206, 220, 1)'
								v.bg = 'offline'
								v.text = '离线'
							} else {
								v.deviceIcon = require("../../static/img/normal.png")
								v.color = 'rgba(0, 255, 196, 1)'
								v.text = '正常'
							}
							switch (v.system) {
								case "fc_system_wxgy":
									v.icon = require("../../static/img/wuxianyangan-model.png")
									break;
								case "fc_system_dqhz":
									v.icon = require("../../static/img/dianqihuozai-model.png")
									break;
								case "fc_system_xfdy":
									v.icon = require("../../static/img/xiaofangdianyuan-model.png")
									break;
								case "fc_system_xfys":
									v.icon = require("../../static/img/xiaofangyongshui-model.png")
									break;
								case "fc_system_wlsb":
									v.icon = require("../../static/img/wulianshebei-model.png")
									break;
								case "fc_system_fhm":
									v.icon = require("../../static/img/fanghuomen-model.png")
									break;
								case "fc_system_zm":
									v.icon = require("../../static/img/zhihuizhaoming-model.png")
									break;
								case "fc_system_cdz":
									v.icon = require("../../static/img/congdianzhuang-model.png")
									break;
								case "fc_system_krqt":
									v.icon = require("../../static/img/keranqiti-model.png")
									break;
								case "fc_system_xfzj":
									v.icon = require("../../static/img/xiaofangzhuji-model.png")
									break;

							}


						})
					}

				})
			},
			//改变设备展示模式的时候
			checkModel() {
				this.isshowCard = !this.isshowCard
				if (this.isshowCard) {
					this.checkModelText = '切换卡片模式'
					this.$nextTick(() => {
						this.$refs.buildimg.style.width = this.imgWidth
						this.$refs.buildimgBody.addEventListener("mousewheel", this.onmouseDiv, false)
					})
				} else {
					this.checkModelText = '切换地图模式'
					if (this.$refs.buildimgBody.removeEventListener) {
						this.$refs.buildimgBody.removeEventListener('mousewheel', this.onmouseDiv)
					}

				}
				this.pageationObj.pageNum = 1
				this.initR()
			},
			//切换分页时更换数据
			changePageation(e) {
				this.pageationObj.pageNum = e
				this.requestListDevice()
			},
			//获取当前建筑的楼层信息
			async getBuildFloor() {
				const userObj = JSON.parse(uni.getStorageSync('user'))
				let res = await deviceApi.getDeviceFloor({
					buildId: this.currentBuilding,
					deptId: this.deptId
				})
				if (res.data && res.data.length >= 1) {
					res.data.forEach(v => {
						if (v.status == 1) {
							v.bg = 'alarm'
							v.icon = require("../../static/img/alarm-floor.png")
						} else if (v.status == 4) {
							v.bg = 'offline'
							v.icon = require("../../static/img/offline-floor.png")
						} else if (v.status == 0) {
							v.bg = 'fault'
							v.icon = require("../../static/img/fault-floor.png")
						} else {
							v.bg = 'normal'
							v.icon = require("../../static/img/normal-floor.png")
						}
					})

					this.buildFloors = res.data
					this.buildFloors = res.data.filter(v => {
						if (v.floor != -10000) {
							return v
						}
					})
					//判断长度是否大于5,大于箭头为高亮
					if (this.buildFloors.length <= 5) {
						this.floorArrow.bottom = require("../../static/img/bottom-arrow1.png")
					} else {
						this.floorArrow.bottom = require("../../static/img/bottom-arrow2.png")
					}
					this.currentFloor = this.buildFloors[0].floor
					this.getFloorModal()
					this.autoFloorMove()
					this.totalFloor = res.data[0]
				} else {
					this.buildFloors = []
					this.currentFloor = '-10000'
				}


			},
			//选择楼层切换不同数据
			selectCurrentFloor(floor, index) {
				this.pageationObj.pageNum = 1
				this.currentFloor = floor
				this.index = index
				if (this.isshowCard) {
					this.getFloorModal()
				} else {
					this.requestListDevice()
				}
			},
			//选择所有楼层切换数据
			selectTotalFloor() {
				this.pageationObj.pageNum = 1
				this.currentFloor = '-10000'
				this.requestListDevice()
			},
			//获取每层的平面图
			async getFloorModal() {

				let res = await deviceApi.getBuildingPlanPopup({
					buildingId: this.currentBuilding,
					floor: this.currentFloor,
					deptId: this.deptId,
					system: this.system,
					status: this.status

				})

				this.cuurentFloorModal = res.data
				if (this.cuurentFloorModal.image) {
					this.getImgWidth()
					let self = this

					this.$nextTick(() => {
						this.$refs.buildimgBox.style.width = '100%'
						this.$refs.buildimgBox.style.height = '100%'
					})
					setTimeout(() => {
						this.sensorMarkers = res.data.listDeviceSign.map((item) => {
							return {
								code: item.code,
								status: item.status,
								mark: item.mark,
								positionSignX: item.mark && item.mark != '' ? Number(item.mark.split(
										",")[0]) : self.imgWidth /
									2 - 16,
								positionSignY: item.mark && item.mark != '' ? Number(item.mark.split(
										",")[1]) : self.imgHeight /
									2 - 16,
								positionX: item.mark && item.mark != '' ? Number(item.mark.split(",")[
										0]) : self
									.imgWidth /
									2 - 16,
								positionY: item.mark && item.mark != '' ? Number(item.mark.split(",")[
										1]) : self
									.imgHeight /
									2 - 16,
								isSelect: false,
								addressDesc: item.addressDesc,
								createTime: (item.createTime.slice(5)).replace(/-/g, '/'),
								id: item.id,
								alarmReason: item.alarmReason,
								deviceTypeName: item.deviceTypeName,
								commandFlag: item.commandFlag,
								showMore: false,
								showMoreTitle: false,
								system: item.system,
								deviceIcon: '',
								videoId: item.videoIdList ? item.videoIdList[0] : null
							}
						})

						this.sensorMarkers.forEach((v, index) => {
							if (v.status === 0) {
								v.deviceIcon = require("../../static/img/fault-card.png")
								v.bg = 'fault'
								v.color = 'rgba(254, 169, 64, 1)'
								v.text = '故障'
							} else if (v.status === 1) {
								v.deviceIcon = require("../../static/img/alarm-card.png")
								v.color = 'rgba(255, 61, 61, 1)'
								v.bg = 'alarm'
								v.text = '报警'

							} else if (v.status === 4) {
								v.deviceIcon = require("../../static/img/off-line-card.png")
								v.color = 'rgba(203, 206, 220, 1)'
								v.bg = 'offline'
								v.text = '离线'
							} else {
								v.deviceIcon = require("../../static/img/normal.png")
								v.color = 'rgba(0, 255, 196, 1)'
								v.text = '正常'
							}
							switch (v.system) {
								case "fc_system_wxgy":
									v.icon = require("../../static/img/wuxianyangan-model.png")
									v.modelIcon = require("../../static/img/model-yangan.png")
									break;
								case "fc_system_dqhz":
									v.icon = require("../../static/img/dianqihuozai-model.png")
									v.modelIcon = require("../../static/img/model-huozai.png")
									break;
								case "fc_system_xfdy":
									v.icon = require("../../static/img/xiaofangdianyuan-model.png")
									v.modelIcon = require("../../static/img/model-dianyuan.png")
									break;
								case "fc_system_xfys":
									v.icon = require("../../static/img/xiaofangyongshui-model.png")
									v.modelIcon = require("../../static/img/model-yongshui.png")
									break;
								case "fc_system_wlsb":
									v.icon = require("../../static/img/wulianshebei-model.png")
									v.modelIcon = require("../../static/img/model-wulian.png")
									break;
								case "fc_system_fhm":
									v.icon = require("../../static/img/fanghuomen-model.png")
									v.modelIcon = require("../../static/img/model-fanghuo.png")
									break;
								case "fc_system_zm":
									v.icon = require("../../static/img/zhihuizhaoming-model.png")
									v.modelIcon = require("../../static/img/model-zhaoming.png")
									break;
								case "fc_system_cdz":
									v.icon = require("../../static/img/congdianzhuang-model.png")
									v.modelIcon = require("../../static/img/model-chongdian.png")
									break;
								case "fc_system_krqt":
									v.icon = require("../../static/img/keranqiti-model.png")
									v.modelIcon = require("../../static/img/model-keran.png")
									break;
								case "fc_system_xfzj":
									v.icon = require("../../static/img/xiaofangzhuji-model.png")
									v.modelIcon = require("../../static/img/model-zhuji.png")
									break;
							}
						})
					}, 500)
				} else {
					this.sensorMarkers = []
					this.imgWidth = null
				}
			},
			ishandleMouse(e) {
				if (e && this.isshowCard) {
					this.isHaveMouse = true
				}
			},
			//手指图片拖动事件
			onChange(e) {
				console.log(e)
			},
			//手指图片放大缩小事件
			onScale(e) {
				console.log(e)
				if (e.detail.scale > 1) {
					this.pointScaleLarge(e.detail.scale)
				} else {
					this.scaleSmall(e.detail.scale)
				}
			},
			//手指图片放大
			pointScaleLarge(scale) {
				// 当前图片dom
				let img = this.$refs.buildimg;
				//图片宽高
				if (this.imgWidth !== null && img.width / this.imgWidth <= 3) {
					img.style.width = (img.width * scale) + "px";
					let crw = img.width;
					let rate = (crw / this.imgWidth);
					this.rendermaker("big", rate);
				} else {
					return false;
				}
			},
			//手指图片缩小
			pointScaleSmall(scale) {
				// 当前图片dom
				let img = this.$refs.buildimg;
				//图片宽高
				if (this.imgWidth !== null && img.width / this.imgWidth <= 3) {
					img.style.width = (img.width / scale) + "px";
					let crw = img.width;
					let rate = (crw / this.imgWidth);
					this.rendermaker("big", rate);
				} else {
					return false;
				}
			},

			//平面图滚轮事件缩放
			mousewheel(e) {
				if (this.isshowCard) {
					this.$nextTick(function() {
						this.$refs.buildimgBody.addEventListener("mousewheel", this.onmouseDiv, false)
					})
				}
			},
			onmouseDiv(e) {
				e.preventDefault()
				let delta = e.wheelDelta || -e.detail;
				delta > 0 ? this.scaleLarge() : this.scaleSmall();
				return false;
			},
			scaleLarge() {
				// 当前图片dom
				if (this.isshowCard) {
					let img = this.$refs.buildimg;
					//图片宽高
					if (this.imgWidth !== null && img.width / this.imgWidth <= 3) {
						img.style.width = (img.width * 1.1) + "px";
						let crw = img.width;
						let rate = (crw / this.imgWidth);
						this.rendermaker("big", rate);
					} else {
						return false;
					}

				}
			},
			scaleSmall() {
				if (this.isshowCard) {
					let img = this.$refs.buildimg;
					//图片宽高
					if (this.imgWidth !== null && this.imgWidth / img.width <= 3) {
						img.style.width = (img.width / 1.1) + "px";
						let crw = img.width;
						let rate = (this.imgWidth / crw)
						this.rendermaker("small", rate);
					} else {
						return false;
					}
				}
			},
			rendermaker(type, rate) {
				let left = this.$refs.buildimg.getBoundingClientRect().x
				let top = this.$refs.buildimg.getBoundingClientRect().y
				let markers = this.sensorMarkers;
				// 相对于原始图片的 x 坐标 * 缩放比例 + 图片的 left 。
				let imgWidth = this.$refs.buildimg.offsetWidth
				let imgHeight = this.$refs.buildimg.offsetHeight
				this.$refs.buildimgBox.style.width = imgWidth + 'px'
				this.$refs.buildimgBox.style.height = imgHeight + 'px'
				if (type === "big") {

					markers.map(item => {
						if (item.mark && item.mark != '') {
							item.positionSignX = item.positionX * rate
							item.positionSignY = item.positionY * rate
						} else {
							item.positionSignX = imgWidth / 2 - 16
							item.positionSignY = imgHeight / 2 - 16
						}

					});
				} else {
					markers.map(item => {
						if (item.mark && item.mark != '') {
							item.positionSignX = item.positionX / rate
							item.positionSignY = item.positionY / rate
						} else {
							item.positionSignX = imgWidth / 2 - 16
							item.positionSignY = imgHeight / 2 - 16
						}
					});
				}
			},
			//选择设备状态来筛选设备
			selectDeviceStatus(id, status) {
				this.pageationObj.pageNum = 1
				this.currentStatus = id
				this.status = status
				if (this.isshowCard) {
					this.getFloorModal()
				} else {
					this.requestListDevice()
				}
			},
			//封装楼层自动滚动函数
			autoFloorMove() {
				if (this.timer) {
					clearInterval(this.timer)
					this.timer = null
				}
				this.timer = setInterval(() => {
					this.currentFloor = this.buildFloors[this.index].floor
					if (this.index >= 5) {
						this.autoFloorChange()
					}

					this.selectCurrentFloor(this.currentFloor, this.index)
					if (this.index >= this.buildFloors.length - 1) {
						this.index = 0
					} else {
						this.index++
					}
				}, 20000)

			},
			autoFloorChange() {
				if (this.index + 1 == this.buildFloors.length) {
					this.floorArrow.bottom = require("../../static/img/bottom-arrow1.png")
					setTimeout(() => {
						this.floorArrow.bottom = require("../../static/img/bottom-arrow2.png")
						this.floorArrow.top = require("../../static/img/top-arrow.png")
						this.$refs.floorItem.forEach(v => {
							v.style.top = '0px'

						})
					}, 20000)
				}

				this.$refs.floorItem.forEach(v => {
					if (v.style.top) {
						v.style.top = parseInt(v.style.top) - 80 + 'px'
						this.floorArrow.top = require("../../static/img/top-arrow2.png")

					} else {
						v.style.top = v.style.top - 80 + 'px'
						this.floorArrow.top = require("../../static/img/top-arrow2.png")
					}
				})
			},
			//鼠标移入图片进去停止播放
			stopFloorAuto(e) {
				clearInterval(this.timer)
				this.timer = null
			},
			//鼠标移出图片开始播放
			startFloorAuto(e) {
				if (this.isRemoteControl || this.isVideoControl) {
					clearInterval(this.timer)
					this.timer = null

				} else {
					this.autoFloorMove()
				}
			},

			getImgWidth() {
				let self = this
				if (self.cuurentFloorModal.image) {
					let img = new Image();
					img.src = self.BaseUrl + '/admin/sys-file/' + self.cuurentFloorModal.image
					img.onload = () => {
						this.$nextTick(() => {
							self.$refs.buildimg.style.width = img.width + 'px'
						})
						self.imgWidth = img.width;
						self.imgHeight = img.height;
					};
				}
			},

			mousedown() {
				this.$refs.buildimgBox.addEventListener('mousedown', (event) => {
					let el = event.currentTarget;
					let disX = event.clientX - el.offsetLeft;
					let disY = event.clientY - el.offsetTop;
					document.onmousemove = e => {
						let l = e.clientX - disX;
						let t = e.clientY - disY;
						//移动当前元素
						el.style.left = l + "px";
						el.style.top = t + "px";
						return false;
					};
					document.onmouseup = () => {
						document.onmousemove = null;
						document.onmouseup = null;
					};
				})
			},
			selectPointer(code, id) {
				this.sensorMarkers.forEach(v => {
					if (v.code === code) {
						deviceApi.getDeviceInfo({
							deviceId: id,
							isDept: 0
						}).then(res2 => {
							this.$set(v, 'pointDatas', res2.data)
						})
						v.isSelect = true
					} else {
						v.isSelect = false
					}
				})
			},
			toCloseModel(code) {
				this.sensorMarkers.forEach(v => {
					if (v.code === code) {
						v.isSelect = false
						return
					}
				})
			},
			//下拉框选择系统的时候
			selectSystem(e) {
				this.pageationObj.pageNum = 1
				this.system = e
				if (this.isshowCard) {
					this.getFloorModal()
				} else {
					this.requestListDevice()
				}
			},
			//选择对应的建筑物
			selectBuilding(id, name, deptId) {
				this.pageationObj.pageNum = 1
				this.currentBuilding = id
				this.currentBuildingName = name
				this.currentDeptId = deptId
				uni.$emit('buildLeftRefresh', {
					currentBuilding: this.currentBuilding,
					currentDeptId: this.currentDeptId
				})
				this.requestStatusNum()
				this.$refs.floorItem.forEach(v => {
					v.style.top = ''
				})
				this.floorArrow = {
					top: require("../../static/img/top-arrow.png"),
					bottom: require("../../static/img/bottom-arrow2.png")
				}
				this.index = 0
				//当前的关联图清空
				this.cuurentFloorModal = ''
				//当前的设备列表清空
				this.deviceLists = []
				if (this.isshowCard) {
					this.getBuildFloor()
				} else {
					this.requestListDevice()
				}


			},
			//点击楼层向上箭头
			topPageFloor() {
				this.$refs.floorItem.forEach(v => {
					if (v.style.top && parseInt(v.style.top) < 0) {
						v.style.top = parseInt(v.style.top) + 80 + 'px'
						this.floorArrow.top = require("../../static/img/top-arrow2.png")
						this.floorArrow.bottom = require("../../static/img/bottom-arrow2.png")
					} else {
						this.floorArrow.top = require("../../static/img/top-arrow.png")
					}
				})
			},
			//点击楼层向下切换
			topPageBottom() {
				this.$refs.floorItem.forEach(v => {
					if (this.buildFloors.length > 5) {
						if (v.style.top == '') {
							v.style.top = v.style.top - 80 + 'px'
							this.floorArrow.top = require("../../static/img/top-arrow2.png")
						} else {
							if (parseInt(v.style.top) >= -((this.buildFloors.length - 5) * 80)) {
								v.style.top = parseInt(v.style.top) - 80 + 'px'
								this.floorArrow.bottom = require("../../static/img/bottom-arrow2.png")
							} else {
								this.floorArrow.bottom = require("../../static/img/bottom-arrow1.png")
							}

						}
					}
				})
			},
			toWatchVideo(id) {
				//去观看视频
				if (id) {
					this.isHaveVideo = !this.isHaveVideo
					this.$emit('rightopenVideoControl', {
						show: true,
						id: id
					})
				}
			},
			//去远程操控设备
			toControlDevice(id, isClick) {
				if (isClick) {
					this.isHaveRemote = !this.isHaveRemote
					this.$emit('remoteControl', {
						show: true,
						id: id
					})
				} else {
					return
				}
			},
			toMoreTitle(id) {
				this.sensorMarkers.forEach(v => {
					if (id === v.id) {
						console.log(id)
						v.showMoreTitle = true
					} else {
						v.showMoreTitle = false
					}
				})
			},
			toShowMoreTitle(id) {
				this.deviceLists.forEach(v => {
					if (id === v.id) {
						console.log(id)
						v.showMoreTitle = true
					} else {
						v.showMoreTitle = false
					}
				})
			},
			toShowMore(id) {
				console.log(id)
				this.deviceLists.forEach(v => {
					if (id === v.id) {
						v.showMore = true
					} else {
						v.showMore = false
					}
				})

			},
			toModelMore(id) {
				this.sensorMarkers.forEach(v => {
					if (id === v.id) {
						v.showMore = true
					} else {
						v.showMore = false
					}
				})
			},
			//封装右边初始化
			init() {
				this.currentBuilding = ''
				this.currentFloorPonit = ""
				this.currentBuildingName = ''
				this.cuurentFloorModal = ''
				this.index = 0,
					this.sensorMarkers = [],
					this.buildFloors = [],
					this.bulidingList = []
				if (this.isshowCard) {
					this.checkModelText = '切换卡片模式'
					this.$nextTick(function() {
						this.$refs.buildimgBody.addEventListener("mousewheel", this.onmouseDiv, false)
					})
				} else {
					this.checkModelText = '切换地图模式'
					this.$nextTick(() => {
						if (this.$refs.buildimgBody.removeEventListener) {
							this.$refs.buildimgBody.removeEventListener('mousewheel', this.onmouseDiv)
						}
					})

				}
				deviceApi.getAllSystem().then(res => {
					this.range = res.data.map(v => {
						return {
							value: v.systemCode,
							text: v.systemName
						}
					})
				})

				deviceApi.getBuildingList({
					deptId: this.deptId,
					isDept: 0
				}).then(res => {
					this.bulidingList = res.data
					this.currentBuilding = res.data[0].buildingId
					this.currentBuildingName = res.data[0].buildingName
					this.requestStatusNum()
					this.getBuildFloor()
				})

			},
			//点击建筑左箭头移动的时候
			bulidLeftMove() {
				let Length = 0
				let boxtotalLength = this.$refs.allBuildList.offsetWidth
				let totalLength = 0
				this.$refs.buildList.forEach(v => {
					totalLength += parseInt(v.offsetWidth) + 10
				})



				this.buildArrow.right = require("../../static/img/right-arrow2.png")
				this.$refs.buildList.forEach(v => {
					v.style.position = 'relative'
					length = parseInt(v.style.left)
					if (v.style.left.length > 0) {
						if (totalLength + length - boxtotalLength <= -100) {
							this.buildArrow.left = require("../../static/img/left-arrow1.png")
							return;
						} else {
							this.buildArrow.left = require("../../static/img/left-arrow.png")
						}
						v.style.left = parseInt(v.style.left) - 80 + 'px'
					} else {
						v.style.left = v.style.left - 80 + 'px'
					}
				})
			},
			buildRightMove() {
				this.$refs.buildList.forEach(v => {
					v.style.position = 'relative'
					if (parseInt(v.style.left) < 0) {
						v.style.left = parseInt(v.style.left) + 80 + 'px'
						this.buildArrow.left = require("../../static/img/left-arrow.png")
						this.buildArrow.right = require("../../static/img/right-arrow2.png")
					} else {
						this.buildArrow.right = require("../../static/img/right-arrow.png")
						return
					}

				})
			},
			//设备详情子传父控制弹窗关闭
			isCloseDevice(val) {
				this.deviceShow = val
			},
			toShowDeviceDetail(id) {
				console.log(id)
				this.deviceLists.forEach(v => {
					if (v.code === id) {
						this.DeviceDetailObj.deptId = v.deptId + ''
						this.DeviceDetailObj.deviceId = v.id
						this.DeviceDetailObj.deviceCode = v.code
						console.log(v.deptId, v.id, v.code)
					}
				})
				this.deviceShow = true
			}
		},
		//整听器初始化数据
		watch: {
			//侦听是否有鼠标
			isHaveMouse(val, old) {
				if (val === true) {
					this.$nextTick(() => {
						this.mousewheel()
						this.mousedown()
					})
				}
			},
			currentFloor(val, old) {
				//重复获取了图片大小
				// this.getImgWidth()
			},
			//侦听是否有打开视屏控制弹窗和远程操控弹窗
			isHaveRemote(val, old) {
				clearInterval(this.timer)
				this.timer = null
			},
			//侦听视频弹窗
			isHaveVideo(val, old) {
				clearInterval(this.timer)
				this.timer = null
			},
			windowWidthFlag(val, old) {
				if (!this.isshowCard && val != old) {
					if (val) {
						this.pageationObj.pageNum = 1
						this.pageationObj.pageSize = 6
					} else {
						this.pageationObj.pageNum = 1
						this.pageationObj.pageSize = 4
					}
					this.requestListDevice()
				}
			},
		},
		//销毁前清空所有定时器,事件监听
		beforeDestroy() {
			clearInterval(this.timer)
			this.timer = null
			if (this.$refs.buildimgBody.removeEventListener) {
				this.$refs.buildimgBody.removeEventListener('mousewheel',this.onmouseDiv)
			}
			uni.$off('globalRefreshDetail')
		},
	}
</script>

<style lang="scss" scoped>
	.detail-right {
		width: 73%;
		background-color: rgba(0, 22, 39, 0.5);


		.top {
			display: flex;
			line-height: 4.62vh;
			height: 4.62vh;
			border-bottom: 1px solid #1BCEFF;
			justify-content: space-between;

			.top-left {
				display: flex;
				align-items: center;
			}

			.top-img {
				width: 7px;
				height: 16px;
				vertical-align: middle;
			}

			.top-right-img {
				width: 20px;
				height: 20px;
				vertical-align: middle;
			}

			.text {
				font-size: 16px;
				color: #fff;
				margin-left: 6px;
			}

			.top-right {
				.text {
					font-size: 16px;
					color: #02C3FF;
					padding-right: 11px;
				}
			}
		}

		// 建筑列表
		.build-list {
			width: 100%;
			margin-top: 10px;
			height: 6.3vh;
			background-color: rgba(27, 165, 255, 0.0800);
			position: relative;
			display: flex;
			align-items: center;
			padding: 0 125px;
			overflow: hidden;

			.all-list {
				margin: 0 auto;
				max-width: 90%;
				display: flex;
				overflow: hidden;

			}

			.left-arrow {
				width: 20px;
				height: 20px;
				position: absolute;
				left: 20px;
				top: 50%;
				transform: translate(0, -50%);
			}

			.right-arrow {
				width: 20px;
				height: 20px;
				position: absolute;
				right: 20px;
				top: 50%;
				transform: translate(0, -50%);
			}

			.list-item {
				display: inline-block;
				font-size: 16px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: rgba(255, 255, 255, 0.7);
				line-height: 36px;
				padding: 0 20px;
				height: 36px;
				border-radius: 2px;
				border: 1px solid;
				text-align: center;
				border-image: linear-gradient(180deg, rgba(2, 195, 255, 0.5), rgba(2, 195, 255, 0.25)) 1 1;
				margin-right: 10px;
				position: relative;

			}

			.active {
				background: linear-gradient(180deg, rgba(0, 173, 255, 0.84) 0%, rgba(17, 51, 82, 0.1) 100%);
				border-image: linear-gradient(180deg, rgba(2, 195, 255, 0.5), rgba(2, 195, 255, 0.25)) 1 1;
				color: #fff;
			}
		}

		// 内容主体部分
		.content {
			.content-filter {
				.select-system {
					margin: 2.3vh 0px 20px 2.6vh;
					align-items: center;
					display: flex;

					.system-text {
						color: rgba(255, 255, 255, 0.5);
						margin-right: 6px;
					}

					::v-deep .el-input--medium .el-input__inner {
						width: 137px;
						height: 30px;
					}

					.uni-stat-box {
						width: 137px;
						flex: 0;
					}


				}

				.device-status {
					margin-left: 120px;
					display: flex;

					.status-item {
						margin-right: 30px;
						width: 130px;
						height: 35px;
						background: url(../../static/img/device-total.png);
						background-size: 100% 100%;
						display: flex;
						align-items: center;
						position: relative;
						justify-content: center;

						.status-img {
							position: absolute;
							bottom: -20px;
							left: 50%;
							transform: translate(-50%, 0);
						}

						.item-text {
							font-size: 14px;
							color: #fff;

						}

						.item-num {
							font-size: 26px;

						}
					}

					.total {
						color: #02C3FF;
					}

					.normal {
						background: url(../../static/img/device-normal.png);
						background-size: 100% 100%;
						color: #00FFC4;

					}

					.alarm {
						background: url(../../static/img/device-alarm.png);
						background-size: 100% 100%;
						color: #FF3D3D;
					}

					;

					.fault {
						background: url(../../static/img/device-fault.png);
						background-size: 100% 100%;
						color: #FEA940;
					}

					.off-line {
						background: url(../../static/img/device-offline.png);
						background-size: 100% 100%;
						color: #CBCEDC;
					}

				}
			}

			// 模型展示区域
			.main-content {
				display: flex;
				height: calc(100vh - 228px - 13.22vh);

				.floor-select {
					flex: 1;
					margin-top: 45px;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-right: 10px;
					justify-content: center;

					.floor-all {
						position: relative;
						left: 15px;
						top: -10px;
						width: 55px;
						height: 55px;
						text-align: center;
						line-height: 55px;
					}


					.floor-icon {
						position: absolute;
						left: -40px;
						top: 50%;
						transform: translate(-50%, 0);
					}

					image {
						width: 16px;
						height: 11px;
						margin-left: 25px;
						margin-bottom: 42px;
					}

					.floor-item {
						position: relative;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
						width: 55px;
						height: 55px;
						background: url(../../static/img/yellow-circle.png) no-repeat center center;
						font-size: 14px;
						margin-bottom: 30px;
					}

					.alarm {
						background: url(../../static/img/red-circle.png) no-repeat center center;
						color: rgba(255, 61, 61, 1);
					}

					.normal {
						background: url(../../static/img/blue-circle.png) no-repeat center center;
						color: rgba(2, 195, 255, 1);
					}

					.fault {
						background: url(../../static/img/yellow-circle.png) no-repeat center center;
						color: rgba(254, 169, 64, 1);
					}

					.offline {
						background: url(../../static/img/white-circle.png) no-repeat center center;
						color: rgba(203, 206, 220, 1);
					}
				}
			}

			.model {
				margin-top: 20px;
				flex: 15;
				position: relative;
				height: calc(100vh - 180px - 13.22vh);
				overflow: hidden;
				text-align: center;

				.none-device {
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
				}

				img {
					width: 100%;
					cursor: move;
				}

				.sensor-pointer {
					width: 32px;
					height: 32px;
					border-radius: 19px;
					position: absolute;
					color: #50E3C2;
					font-size: 18px;
					left: -9px;
					top: -9px;
					justify-content: center;
					display: flex;
					align-items: center;

					.icon-img {
						width: 18px;
						height: 18px;
						cursor: pointer !important;
					}

					&.abnoraml {
						background: url(../../static/img/floor-device-normal.png) no-repeat center;
					}

					&.alarm {
						color: #F84242;
						background: url(../../static/img/floor-device-alarm.png) no-repeat;
					}

					&.offline {
						background: url(../../static/img/floor-device-offline.png) no-repeat;
					}

					&.fault {
						background: url(../../static/img/floor-device-fault.png) no-repeat;
					}

					.pointer-modal {
						width: 465px;
						height: 400px;
						background: url(../../static/img/floor-model-bg.png) no-repeat;
						background-size: 100% 100%;
						z-index: 99;
						left: 20px;
						top: 20px;
						position: absolute;
						padding: 10px 20px 0 20px;

						.close-png {
							position: absolute;
							right: 20px;
							top: 20px;
							width: 20px;
							height: 20px;
							z-index: 100;
						}

						.item-top {
							border-bottom: 1px solid;
							border-image: linear-gradient(135deg, rgba(58, 233, 255, 0.2), rgba(2, 195, 255, 0.2)) 1 1;
							display: flex;
							align-items: center;
							padding: 10px 0;

							.top-img {
								width: 45px;
								height: 45px;
							}

							.top-content {
								display: flex;
								flex-direction: column;
								padding-left: 10px;
								align-items: flex-start;
								width: calc(100% - 196px);

								.title {
									width: 100%;
									font-size: 16px;
									color: #00FFC4;
									margin-bottom: 5px;

									-webkit-line-clamp: 2;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									overflow: hidden;
									text-overflow: ellipsis;
									text-align: left;
								}

								.id {
									text-align: left;
									font-size: 12px;
									color: #fff;
								}

								margin-right: 10px;

								position: relative;

								.tip {
									background-color: rgba(65, 60, 43, 0.8000);

									.tip-top {
										justify-content: space-between;
										display: flex;
										.close-png {
											width: 12px;
											height: 12px;
											cursor: pointer;
										}

										.tip-title {
											color: rgba(254, 169, 64, 1);
											font-size: 16px;
										}

									}

									.tip-content {
										display: flex;
										word-break: break-all;

										font-size: 16px;
										word-break: break-all;
									}

									z-index: 5;
									color: #fff;
									top:45px;
									left: 0;
									position: absolute;
									width: 250px;
									padding: 10px 20px;
									border-radius: 6px;
									border: 1px solid rgba(245, 166, 35, 0.5);

								}
							}

							.btns {
								display: flex;
								align-items: center;

								.control-img {
									width: 22px;
									height: 22px;
								}
							}

							button:after {
								border: none;
							}

							button {
								width: 48px;
								height: 48px;
								border-radius: 2px;
								border: 1px solid #02C3FF;
								backdrop-filter: blur(0px);
								background-color: linear-gradient(180deg, rgba(52, 167, 249, 0.06) 0%, rgba(93, 140, 252, 0.07) 100%);
								color: #02C3FF;
								font-size: 14px;
								margin-right: 10px;
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;

								span {
									line-height: 22px;
								}

								&:last-child {
									margin-right: 35px;
								}
							}

							.active {
								opacity: 0.3;
							}
						}

						.address-desc {
							margin: 10px 10px 0 20px;
							text-align: left;


							.marker-img {
								width: 18px;
								height: 18px;
								vertical-align: middle;
							}

							.address-text {
								font-size: 14px;
								color: #fff;
								padding-top: 20px;
							}
						}

						.info-desc {
							display: flex;
							overflow: hidden;

							.desc-left {
								position: relative;
								display: flex;
								flex-direction: column;
								align-items: center;

								.left-img {
									width: 144px;
									height: 144px;
								}

								.bottom-img {
									position: absolute;
									left: -18px;
									top: 90px;
									width: 180px;
									height: 62px;
								}
							}

							.desc-right {
								.content-item {
									display: flex;
									align-items: center;
									text-align: left;
									margin: 20px 0 0 20px;
									position: relative;

									.status-title {
										font-size: 14px;
										color: #fff;
									}

									.status-content {
										width: 80%;
										color: #fff;
										font-size: 14px;
									}

									.alarm-reason {

										display: inline-block;
										width: 190px;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}

									.tip {
										background-color: rgba(65, 60, 43, 0.8000);

										.tip-top {
											justify-content: space-between;
											display: flex;


											.close-png {
												width: 12px;
												height: 12px;
											}

											.tip-title {
												color: rgba(254, 169, 64, 1);
												font-size: 16px;
											}
										}

										z-index: 5;
										color: #fff;
										top:-60px;
										left: -5%;
										position: absolute;
										width: 250px;
										white-space: normal;
										padding: 10px 20px;
										border-radius: 6px;
										border: 1px solid rgba(245, 166, 35, 0.5);

										.tip-content {
											word-break: break-all;
											display: inline-block;
											font-size: 14px;
										}
									}

								}
							}


						}

						.parameter-information {
							display: flex;
							flex-wrap: wrap;
							.information-item {
								text-align: center;
								width: 31%;
								height: 55px;
								border: 1px solid;
								border-image: linear-gradient(360deg, rgba(61, 230, 255, 0.22), rgba(61, 230, 255, 0.5)) 1 1;
								margin: 15px 0 0 2%;
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: space-around;

								.item-num {
									color: #00FFFF;
									font-size: 14px;
								}

								.item-detail {

									color: #fff;
									font-size: 12px;
								}
							}

							.fault {
								border-image: linear-gradient(360deg, rgba(250, 147, 6, 0.22), rgba(250, 147, 6, 0.5)) 1 1;
								;
							}

							.alarm {
								border-image: linear-gradient(360deg, rgba(255, 61, 61, 0.22), rgba(255, 61, 61, 0.5)) 1 1;
								;
							}

							.offline {
								border-image: linear-gradient(360deg, rgba(203, 206, 220, 0.22), rgba(203, 206, 220, 0.5)) 1 1;
							}
						}
					}
				}

				.img-view-wrap {
					position: absolute;
					left: 10px;
					top: 10px;
					bottom: 10px;
					right: 10px;
					.img-view-body {
						position: absolute;
						left: 50%;
						top: 50%;
						transform: translateX(-50%) translateY(-50%);
						cursor: pointer;
						width: 100%;
						height: 100%;
					}
				}
			}

			//卡片展示
			.card {
				height: 64.8vh;
				flex: 19;
				margin: 0px 10px 0px 30px;
				height: calc(100vh - 228px - 13.22vh);
				overflow-y: auto;
				.all-item {
					display: flex;
					flex-wrap: wrap;
					overflow: auto;

				}

				.none-device {
					height: 100%;
					display: flex;
					justify-content: center;
					flex-direction: column;
					align-items: center;

					img {
						width: 207px;
						height: 130px;
					}

					div {
						color: rgba(255, 255, 255, 0.7);
						font-size: 14px;
					}
				}



				.card-item {
					box-sizing: border-box;
					padding: 16px 20px 0 19px;
					width: 31.3%;
					height: 332px;
					margin: 0 2% 30px 0;
					background: linear-gradient(180deg, rgba(52, 167, 249, 0.06) 0%, rgba(93, 140, 252, 0.07) 100%);
					border-radius: 25px;

					.item-top {
						border-bottom: 1px solid;
						border-image: linear-gradient(135deg, rgba(58, 233, 255, 0.2), rgba(2, 195, 255, 0.2)) 1 1;
						display: flex;
						padding-bottom: 10px;
						align-items: center;

						.top-img {
							width: 45px;
							height: 45px;
							margin-right: 10px;
						}

						.top-content {
							width: calc(100% - 171px);

							.title {
								width: 100%;
								font-size: 16px;
								color: #00FFC4;
								margin-bottom: 5px;
								-webkit-line-clamp: 2;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.id {
								font-size: 12px;
								color: rgba(255, 255, 255, 0.7);
							}

							margin-right: 10px;
							position: relative;

							.tip {
								background-color: rgba(65, 60, 43, 0.8000);

								.tip-top {
									justify-content: space-between;
									display: flex;
									.close-png {
										width: 12px;
										height: 12px;
										cursor: pointer;
									}

									.tip-title {
										color: rgba(254, 169, 64, 1);
										font-size: 16px;
									}

								}

								.tip-content {
									display: flex;
									word-break: break-all;

									font-size: 16px;
									word-break: break-all;
								}

								z-index: 5;
								color: #fff;
								top:45px;
								left: 0;
								position: absolute;
								width: 250px;
								padding: 10px 20px;
								border-radius: 6px;
								border: 1px solid rgba(245, 166, 35, 0.5);

							}
						}

						.btns {
							display: flex;
							align-items: center;
							.control-img {
								width: 22px;
								height: 22px;
							}
						}

						button:after {
							border: none;
						}

						button {
							width: 48px;
							height: 48px;
							border-radius: 2px;
							border: 1px solid #02C3FF;
							backdrop-filter: blur(0px);
							background-color: linear-gradient(180deg, rgba(52, 167, 249, 0.06) 0%, rgba(93, 140, 252, 0.07) 100%);
							color: #02C3FF;
							font-size: 14px;
							margin-right: 10px;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							span {
								line-height: 22px;
							}
							&:last-child {
								margin-right: 0;
							}
						}

						.active {
							opacity: 0.3;
						}
					}

					.address-desc {
						margin-top: 10px;

						.marker-img {
							width: 16px;
							height: 16px;
							vertical-align: middle;
						}

						.address-text {
							margin-left: 3px;
							font-size: 14px;
							color: rgba(255, 255, 255, 0.7);
							vertical-align: middle;
						}
					}

					.info-desc {
						display: flex;
						overflow: hidden;

						.desc-left {
							position: relative;
							display: flex;
							flex-direction: column;
							align-items: center;

							.left-img {
								width: 120px;
								height: 120px;
							}

							.bottom-img {
								position: absolute;
								left: -10px;
								top: 85px;
								width: 140px;
								height: 40px;
							}
						}

						.desc-right {
							margin-left: 15px;
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							padding: 10px 0;
							width: calc(100% - 120px);

							.content-item {
								margin: 10px 0 0 0px;
								display: flex;
								align-items: center;
								.status-title {
									font-size: 14px;
									color: rgba(255, 255, 255, 0.7);
								}

								.status-content {
									color: #fff;
									font-size: 14px;
									line-height: 20px;
								}

								.alarm-reason {

									display: inline-block;
									overflow: hidden;
									text-overflow: ellipsis;
									white-space: nowrap;
									width: calc(100% - 74px);
								}

								.tip {
									background-color: rgba(65, 60, 43, 0.8000);

									.tip-top {
										justify-content: space-between;
										display: flex;


										.close-png {
											width: 12px;
											height: 12px;
											cursor: pointer;
										}

										.tip-title {
											color: rgba(254, 169, 64, 1);
											font-size: 12px;
										}

									}

									.tip-content {
										display: flex;

										font-size: 16px;
										word-break: break-all;
									}

									z-index: 5;
									color: #fff;
									top:10px;
									left: 20%;
									position: absolute;
									width: 250px;
									padding: 10px 20px;
									border-radius: 6px;
									border: 1px solid rgba(245, 166, 35, 0.5);

								}
							}
						}
					}

					.parameter-information {
						display: flex;
						flex-wrap: wrap;

						.information-item {
							text-align: center;
							width: 30%;
							height: 55px;
							border: 1px solid;
							border-image: linear-gradient(360deg, rgba(61, 230, 255, 0.22), rgba(61, 230, 255, 0.5)) 1 1;
							margin: 15px 0 0 7px;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-around;

							.item-num {
								color: #00FFFF;
								font-size: 14px;
							}

							.item-detail {

								color: rgba(255, 255, 255, 0.7);
								font-size: 12px;
							}
						}

						.fault {
							border-image: linear-gradient(360deg, rgba(250, 147, 6, 0.22), rgba(250, 147, 6, 0.5)) 1 1;
							;
						}

						.alarm {
							border-image: linear-gradient(360deg, rgba(255, 61, 61, 0.22), rgba(255, 61, 61, 0.5)) 1 1;
							;
						}

						.offline {
							border-image: linear-gradient(360deg, rgba(203, 206, 220, 0.22), rgba(203, 206, 220, 0.5)) 1 1;
						}
					}
				}
			}
		}

		.pagetion {
			width: 100%;
			height: 6.5vh;
		}

	}

	.uni-stat__select {
		width: 137px;

	}

	.pagination {
		display: flex;
		right: 200px;
		top: 92%;
	}

	.marker {
		display: flex;
		align-items: center;
		margin-left: 30px;

		.marker-text {
			color: #fff;
		}
	}

	.markerModel {
		position: absolute;
		bottom: 20px;
		left: 30px;
		display: flex;
		align-items: center;

		.markerImg {
			width: 18px !important;
			height: 18px;
			margin-right: 10px;
		}

		.marker-text {
			color: #fff;
		}
	}

	.right-bottom {
		height: 8.3vh;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-right: 90px;
	}

	::v-deep .page-pagination .page-con {
		margin-top: 20px;
		height: 60px;
	}

	::v-deep .page-pagination .page-con .page-scroll-child .pag-btn {
		margin-right: 20px;
		width: 35px;
		height: 35px;
		border-radius: 35px;
		color: #fff !important;
		padding: 0;
		text-align: center;
		border: none !important;
		line-height: 35px;
		background-color: rgba(0, 85, 157, 0.1000);
	}

	::v-deep .page-pagination .page-con .page-scroll-child .pag-btn:first-child {
		border: none !important;
	}

	::v-deep .page-pagination .page-con .page-scroll-child .pag-btn.prev {
		padding: 0;
	}

	::v-deep .page-pagination .page-con .page-scroll-child .pag-btn.next {
		padding: 0;
	}

	::v-deep .page-pagination .page-con .page-scroll-child .pag-btn.active {
		background-color: rgba(2, 195, 255, 1) !important;
		color: #fff;
	}

	::v-deep .el-input--medium .el-input__inner {
		height: 30px;
	}

	::v-deep .el-input--medium .el-input__icon {
		line-height: 30px;
	}

	@media (max-width:1680px) {
		.detail-right {
			.content {
				.card {
					.card-item {
						width: 48%;
					}
				}
			}
		}

	}
</style>
